<!--
 * @Description: 
 * @Author: @yangwenshan
 * @since: 2021-05-13 15:36:56
 * @LastAuthor: @yangwenshan
 * @lastTime: 2021-05-19 16:57:48
-->
<template>
  <a-drawer title="订单详情" width="35%" placement="right" :visible="visible" @close="onClose">
    <a-spin tip="数据加载中" :spinning="loading">
      <a-form :form="form" @submit="handleSubmit" layout="horizontal" :labelCol="{ span: 3 }"
        :wrapperCol="{ span: 21 }">
        <a-form-item label="姓名">
          <a-input :disabled="mode !== 'edit'" placeholder="请输入姓名"
            v-decorator="['nickname', { initialValue: data.nickname, rules: [{ required: true, message: '请输入姓名' }] }]" />
        </a-form-item>
        <a-form-item label="电话">
          <a-input :disabled="mode !== 'edit'" placeholder="请输入电话"
            v-decorator="['username', { initialValue: data.username, rules: [{ required: true, message: '请输入电话' }] }]" />
        </a-form-item>
        <a-form-item label="身份证">
          <a-input :disabled="mode !== 'edit'" placeholder="请输入身份证"
            v-decorator="['identify_no', { initialValue: data.identify_no, rules: [{ required: false, message: '请输入身份证' }] }]" />
        </a-form-item>
        <a-form-item label="地区">
          <a-input :disabled="mode !== 'edit'" placeholder="请输入地区"
            v-decorator="['area', { initialValue: data.area, rules: [{ required: false, message: '请输入地区' }] }]" />
        </a-form-item>
        <a-form-item label="总题数">
          {{ data.total_ques }}
        </a-form-item>
        <a-form-item label="做题时长">
          {{ data.replay_ques_time }}
        </a-form-item>
        <a-form-item label="已做题数">
          {{ data.replay_ques || 0 }}
        </a-form-item>
        <a-form-item label="正确率"> {{ data.right_accuracy || 0 }} </a-form-item>
        <a-form-item v-show="mode === 'edit'" :wrapper-col="{ span: 12, offset: 3 }">
          <a-button :loading="confirmLoading" type="primary" html-type="submit"> 保存 </a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-drawer>
</template>
<script>
import { getUserDetail, updateUser } from '@/api/user'
export default {
  data() {
    return {
      data: {},
      visible: false,
      mode: 'check',
      form: this.$form.createForm(this),
      loading: false,
      confirmLoading: false
    }
  },
  methods: {
    showDrawer(id, mode = 'check') {
      this.visible = true
      this.mode = mode
      this.getDetail(id)
    },
    onClose() {
      this.data = {}
      this.visible = false
      this.form.resetFields()
    },
    getDetail(id) {
      this.loading = true
      getUserDetail(id).then((res) => {
        this.data = res
      }).finally(() => {
        this.loading = false
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.confirmLoading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          let data = {
            nickname: values.nickname,
            username: values.username,
            identify_no: values.identify_no,
            area: values.area
          }
          updateUser(this.data.id, data).then(res => {
            this.$message.success('修改成功')
            this.visible = false
            this.$emit('refresh')
          }).finally(() => {
             this.confirmLoading = false
          })
        }
      })
    },
  },
}
</script>
